<template>
    <div id="app">
        <input type="text" v-model="message">
            <h2>输入内容:{{ message }}</h2>
        <p>你喜欢的水果?{{ fruit }}</p>
        <label for="banana">banana</label>
        <input id="banana" type="radio" v-model="fruit" value="banana">
        <label for="orange">orange</label>
        <input id="orange" type="radio" v-model="fruit" value="orange">
        <p> 你最喜欢的颜色?{{ colors }}</p>
        <label for="Red">red</label>
        <input id="Red" type="checkbox" v-model="colors" value="Red">
        <label for="Yellow">Yellow</label>
        <input id="Yellow" type="checkbox" v-model="colors" value="Yellow">
        <p> 你最喜欢的出行方式?{{ Vehicles }}</p>
        <el-select v-model="Vehicles" multiple>
            <el-option value="walk"></el-option>
            <el-option value="Bus"></el-option>
            <el-option value="Car"></el-option>
            <el-option value="subway"></el-option>
        </el-select><br>

        <input type="text" v-model.lazy="name">
        <h2>最美丽的风景名:{{ name }},类型:{{ typeof name}}</h2>
        <input type="text" v-model.number="age">
        <h2>最大年龄:{{ age }},类型:{{ typeof age}}</h2>
        <input type="text" v-model.trim="brief">
        <h2>简介:{{ brief }},类型:{{ typeof brief}}</h2>
    </div>

</template>

<script>
    export default {
        name: "Fst04",
        data(){
            return{
                message:'',
                fruit:'',
                colors:[],    //使用数组接受多选数据
                Vehicles:[],
                name:'',
                age:null,
                brief:''
            }
        }
    }
</script>

<style scoped>

</style>